<!-- 结算页-->
<template>
  <div>
    <Search></Search>
    <div class="order-wrap w">
      <AddressBar></AddressBar>
    <div class="goodsInfo-wrap">
      <h2 class="title">{{$t('订单详情')}}</h2>
      <div class="goodsInfo">
        <div class="goodsInfo-item" v-for="(item,i) in getCartList" :key="`goodsItem-${i}`">
        <div class="goodsInfo-header">
          <p>{{item.goodres && item.goodres[0].shop_name}}</p>
          <div>{{$t('联系客服')}} <Icon type="md-headset" color="#e2231a" /></div>
        </div>

        <div class="goodsInfo-content"  v-for="(goods,g) in item.goodres" :key="`goodsItem-${i}-${g}`">
          <img
            class="goodsInfo-content-cover"
            :src="goods.thumb_url"
            alt=""
          />
          <div class="goodsInfo-content-center">
            <p>{{goods.goods_name}}  <Tag  v-if="goods.is_send_free===1" color="warning">{{$t('包邮')}}</Tag></p>
            <p>{{goods.goods_attr_str}}</p>
          </div>
          <div class="goodsInfo-content-right">
            <p>{{`¥${goods.shop_price} x${goods.goods_num}`}}</p>
            <p>¥{{+goods.shop_price*goods.goods_num}}</p>
          </div>
        </div>
            <div class="goodsInfo-fee">
              <span class="left-name">{{$t('运费')}}</span>
              <span class="goodsInfo-fee-price">{{item.freight?`¥ ${item.freight}`:$t('包邮')}}</span>
            </div>
            <div class="goodsInfo-fee">
              <span class="left-name">{{$t('店铺总计')}}</span>
              <span class="goodsInfo-fee-price">{{`¥ ${item.xiaoji_price}`}}</span>
            </div>

<!--          <div class="goodsInfo-delivery">-->
<!--            <p class="left-name">配送方式</p>-->
<!--            <div class="goodsInfo-delivery-right">-->
<!--              <span-->
<!--                :class="{-->
<!--                'goodsInfo-delivery-right-item': true,-->
<!--                'goodsInfo-delivery-right-active': true,-->
<!--              }"-->
<!--              >快递配送</span-->
<!--              >-->
<!--              <span class="goodsInfo-delivery-right-item">快递配送</span>-->
<!--            </div>-->
<!--          </div>-->

        <!-- <div class="goodsInfo-message">
          <p class="left-name">买家留言</p>
          <Input
            class="goodsInfo-message-input"
            v-model="message"
            type="textarea"
            :rows="4"
            placeholder="请输入留言"
            maxlength="200"
            :show-word-limit="true"
            clearable
            size="large"
          />
        </div> -->
        </div>
      </div>
    </div>

    <div class="footer-bar">
      <div class="w">
        <div class="submit">
          <div class="goodsInfo-total">
            <span>{{$t('共计')}} <span class="goodsInfo-total-num">{{`${settleInfo.zong_num}`}}</span>{{$t('件商品')}}</span>
            <span>{{$t('实际总额')}}</span>
            <span class="price">{{`¥${settleInfo.zsprice}`}}</span>
          </div>
            <Button type="error" class="submit-btn"
                    @click="goPay"
              >{{$t('提交订单')}}</Button
            >
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { Search, AddressBar, GoodsListNav } from "@/components";
import { mapState, mapActions} from "vuex";
export default {
  name: "Order",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      settleInfo:{},
      message:''
    };
  },
  created () {
    const {query:{ pur_id,fangshi, cart_idres ,payType}={}} = this.$route
    this.payType = payType
    this.cart_idres = cart_idres
    cart_idres?this.getcartsure({cart_idres}):this.purBuyConfirm({pur_id, fangshi})
  },
  computed: {
    getCartList() {
      return this.settleInfo['goodinfo']
    },
    ...mapState(["addressList","curAddressIndex"])
  },
  methods: {
   async purBuyConfirm(params){
     const {status,data} = await this.$http.getpursure(params)
     if(status===200){
        this.$set(this,'settleInfo',data)
     }
    },
    async getcartsure(params){
      const {status,data} = await this.$http.getcartsure(params)
     if(status===200){
        this.$set(this,'settleInfo',data)
     }
    },

   async goPay(){
      const {query:{ pur_id,fangshi }={}} = this.$route
      const {id:dz_id,contacts,phone,province,city,area,address}= this.addressList[this.curAddressIndex]
     const  addressInfo = contacts + ' ' + phone + ' ' + province+city+area+ address
     const {cart_idres} = this
      const {status,data} = cart_idres?(await this.$http.getaddorderPay({cart_idres,dz_id})):(await this.$http.getpuraddorderPay({fangshi,pur_id,dz_id}))
     const { zsprice } = this.settleInfo
     if(status===200){
       this.$router.replace({
         path:'/Pay',
         query:{
           order_number: data.order_number,
           zf_type:data.zf_type,
           zsprice,
           addressInfo,
           order_status:'success'
         }
       })
     }

    }
  },
  mounted() {},
  components: {
    Search,
    GoodsListNav,
    AddressBar,
  },
};
</script>

<style lang="scss" scoped>
.order {
  &-wrap {
    margin-top: 20px;
  }
}

@import "@/common/style/common.scss";

.borderBottom {
  border-bottom: 1px solid #eee;
}
.commonWrap {
  margin: 0 30px;
  padding: 16px 0;
  @extend .borderBottom;
}
.price {
  font-size: 16px;
  font-weight: bold;
  color: #e2231a;
}
.title {
  font-size: 20px;
  padding: 15px 20px;
  font-weight: 600;
  position: relative;
  background-color: #fff;
  &::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: repeating-linear-gradient(
      -45deg,
      #ff6c6c,
      #ff6c6c 20%,
      transparent 0,
      transparent 25%,
      #1989fa 0,
      #1989fa 45%,
      transparent 0,
      transparent 50%
    );
    background-size: 80px;
    content: "";
  }
}

.address-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 30px;
  background-color: #fff;
}
.add-box {
  width: 260px;
  display: flex;
  height: 146px;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
}
.goodsInfo-wrap {
  margin: 20px 0;
}
.goodsInfo {
  margin: 20px;
  &-item{
    background-color: #fff;
    margin-bottom: 20px;
  }
  &-header {
    @include flex($jc: space-between);
    padding: 20px 0;
    margin: 0 30px;
    @extend .borderBottom;
  }
  &-content {
    @include flex($jc: space-between);
    @extend .borderBottom;

    padding: 20px 0;
    margin: 0 30px;
    &-cover {
      width: 60px;
      height: 60px;
    }
    &-center {
      flex: 2;
      margin-left: 20px;
      & > p:nth-child(1) {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 5px;
      }
      & > p:nth-child(2) {
        font-size: 12px;
      }
    }

    &-right {
      @include flex($jc: space-between);
      & > p {
        font-size: 16px;
      }
      & > p:nth-child(1) {
        margin-right: 50px;
      }
      & > p:nth-child(2) {
        color: #e2231a;
        font-weight: bold;
      }
    }
  }

  &-fee {
    @include flex($jc: space-between);
    @extend .commonWrap;
    &-price {
      font-size: 16px;
      font-weight: bold;
      color: #e2231a;
    }
  }

  &-delivery {
    @include flex();
    @extend .commonWrap;
    &-right {
      &-item {
        border: 1px solid #c7c7c7;
        padding: 5px 24px;
        margin-right: 20px;
        cursor: pointer;
        color: #333;
      }
      &-active {
        border: 1px solid;
        color: #e2231a;
      }
    }
  }

  &-message {
    @include flex();
    @extend .commonWrap;
    &-input {
      flex: 1;
      /deep/ .ivu-input {
        background-color: #f5f5f5;
      }
    }
  }

  &-subtotal {
    text-align: right;
    @extend .commonWrap;
    border: none;
    padding-right: 20px;
  }

  &-total {
    text-align: right;
    padding-right: 20px;
    &-num{
      color: #e1251b;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.submit {
  @include flex($jc: flex-end);
  &-btn {
    border-radius: 0;
    margin: 0 30px;
    height: 50px;
    padding: 0 50px;
    font-size: 16px;
  }
}

.left-name {
  display: inline-block;
  width: 100px;
  font-size: 16px;
  font-weight: bold;
}
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 0 -1px 8px #00010114;
  z-index: 1000;
}
</style>
